<!DOCTYPE html>
<html dir="ltr" lang="zh_cn"><!--<![endif]--><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>购物车</title>
    <!--<base href="https://mall.opencart.cn/">-->

    <!-- Facebook share -->
    <!--<meta property="og:site_name" content="OpenCart 3.0 中文专业版 - PHP 开源电商系统">-->
    <!--<meta property="og:url" content="https://mall.opencart.cn/index.php?route=checkout/cart">-->
    <!--<meta property="og:type" content="website">-->
    <!--<meta property="og:title" content="购物车">-->
    <!--<meta property="og:description" content="">-->
    <!--<meta property="og:image" content="https://mall.opencart.cn/image/cache/catalog/logo-600x315.png">-->
    <!--<meta property="og:image:width" content="600">-->
    <!--<meta property="og:image:height" content="315">-->


    <link rel="stylesheet" href="./css/layer.css?v=3.1.1" id="layuicss-layer">
    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <link href="./css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="./css/stylesheet.css" rel="stylesheet">

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!--<script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>


</head>
<body class="checkout-cart" ontouchstart="" onmouseover="">
<div id="app-cart">
    <a href="#page-top" class="go-top"><i class="iconfont"></i></a>


    <div class="container">
        <div class="row">
            <div id="content" class="col-xs-12">
                <div class="nav-bar cart-top-iconnav-bar">
                    <span class="back-icon btn btn-left" onclick="window.history.back(-1)" ><i class="iconfont"></i></span>
                    购物车
                    <span class="edit btn btn-right" v-bind:class="{'active':remove_active}" v-on:click="remove_active=remove_active?0:1"><i class="iconfont"></i></span>
                </div>

                <div v-show='cart_list.length>0' id="product-table">
                        <div class="row widget cart-list-box">
                            <div class="col-xs-12">

                                <div class="product-section">
                                    <div v-bind:id="'cart-'+item.id" v-for="item in cart_list" class="product-item">
                                        <div class="selected">
                                            <div class="cart-select">
                                                <input type="checkbox" v-on:click="cart_select()" v-model="selected_cart"
                                                       v-bind:value="item.id"
                                                       v-bind:id="'checkbox-'+item.id" v-bind:name="'selected[' + item.id + ']'"  >
                                                <label v-bind:for="'checkbox-'+item.id"></label>
                                            </div>
                                        </div>
                                        <div class="thumb">
                                            <a href="https://mall.opencart.cn/index.php?route=product/product&amp;product_id=34">
                                                <img src="https://mall.opencart.cn/image/cache/catalog/mi/product/product-15-100x100.png"
                                                     alt="Sony/索尼 WH-H900N头戴式无线蓝牙降噪耳机"
                                                     title="Sony/索尼 WH-H900N头戴式无线蓝牙降噪耳机" class="img-responsive"></a>
                                        </div>
                                        <div class="info">
                                            <div class="name">
                                                {{item.name}}
                                            </div>
                                            <div class="price">单价: ￥{{item.price}}</div>
                                            <div class="options">
                                            </div>

                                            <div class="buttom-total">
                                                <div class="sub-total">总计: ￥{{item.price * item.goods_num}}</div>
                                                <div class="cart-quantity-wrapper" v-bind:class="{'edit-remove':remove_active}">
                                                    <div id="cart-product-quantity" class="input-group">
                  <span class="input-group-btn quantity-down">
                    <button v-on:click="change_number( item, '-' )" class="btn btn-default" type="button">-</button>
                  </span>
                                                        <input type="text" v-bind:name="'quantity['+ item.id +']'" v-model="item.goods_num"
                                                               v-on:change="change_number( item )"
                                                               size="2" class="form-control cart-input-quantity">
                                                        <span class="input-group-btn quantity-up">
                    <button v-on:click="change_number( item, '+' )" class="btn btn-default" type="button">+</button>
                  </span>
                                                    </div>
                                                    <div class="remove-button" v-on:click="remove( item )">
                                                        <button type="button" class="btn btn-default" data-toggle="tooltip" title="移除" >移除</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>

                    </div>


                <div v-show='cart_list.length>0' class="row">


                    <div  class="price-list">
                        <div class="col-xs-12">
                            <table id="cart-totals" class="table mb-0">
                                <tbody><tr>
                                    <td class="text-left"><strong>商品总额</strong></td>
                                    <td class="text-right">￥{{goods_total}}</td>
                                </tr>
                                <tr>
                                    <td class="text-left"><strong>订单总额</strong></td>
                                    <td class="text-right">￥{{order_total}}</td>
                                </tr>

                                </tbody></table>
                        </div>
                    </div>
                </div>

                <div v-show='cart_list.length==0' class="row widget">
                    <div class="col-sm-12">
                        <div class="no-items">
                            <span class="icon"><i class="iconfont"></i></span>
                            <span class="msg">您的购物车内没有商品！</span>
                            <a class="btn btn-default btn-block" href="https://mall.opencart.cn/">继续</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <nav id="bottom-checkout">
        <div class="cart-select-group">
            <div class="cart-select">
                <input v-on:click="check_all()" type="checkbox"
                       v-model="all_checked" id="checkbox-all" style="visibility: hidden" />
                <label for="checkbox-all"></label>
            </div>
            <span>全选</span>
        </div>
        <div class="total-group">
            <span class="total-price"><span class="text-pay">支付金额: </span><strong class="number">￥{{order_total}}</strong></span>
        </div>
        <div class="checkout-group"><a href="https://mall.opencart.cn/index.php?route=checkout/checkout">结账</a></div>
    </nav>
</div>

<script>

    var app = new Vue({
        el: '#app-cart',
        data: {
            cart_list:[],
            selected_cart:[],
            all_checked:1,
            remove_active:0,
            goods_total:0,
            order_total:0,
        },

        methods:{

            cart_select:function(){

                var t = this;

                setTimeout(function(){
                    // console.log( t.selected_cart );

                    t.get_total();
                });


                //todo api 计算价格

            },

            check_all:function(){

                var t = this;
                setTimeout(function(){
                    console.log( t.all_checked );
                    t.selected_cart = [];
                    if( t.all_checked ){
                        for(var i = 0; i < t.cart_list.length; i ++ ){
                            t.selected_cart.push( t.cart_list[i].id );
                        }
                    }
                    t.get_total();

                });

            },

            remove:function( goods ){

                var t = this;
                //todo api 删除 该条数据

                var url = '/?r=cart/remove';
                url += '&cart_id='+goods.id;
                axios.get( url ).then(function( res ){
                    //todo 重新刷新 条目
                    t.get_list();
                });


            },

            change_number:function( goods, flag ){


                var t = this;

                if( flag == '+'){
                    goods.goods_num ++;
                }else if( flag == '-'){
                    goods.goods_num --;
                }
                goods.goods_num = goods.goods_num>0?goods.goods_num:1;


                //todo api 进行修改
                var url = '/?r=cart/change';
                url += '&cart_id='+goods.id;
                url += '&number='+goods.goods_num;
                axios.get( url ).then(function( res ){
                    //todo 重新刷新 条目
                    t.get_total();
                });
            },

            get_list:function( tag ){

                var t = this;
                var url = '/?r=cart';
                axios.get( url )
                    .then(function (res) {
                        if( res.data.status ){
                            //todo 添加提示
                            console.log( res.data.description );
                            return;
                        }
                        t.cart_list = res.data.list;
                        // t.goods_total = res.data.goods_total;
                        // t.order_total = res.data.order_total;
                        if( tag == 'created' ){
                            for( var i = 0; i < t.cart_list.length; i ++ ){
                                t.selected_cart.push( t.cart_list[i].id );
                            }
                        }

                        t.get_total();
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },

            get_total:function(){
                var t = this;
                var url = '/?r=cart/calculate';
                var cart_ids = this.selected_cart.join(',');
                url += '&cart_ids=' + cart_ids;
                axios.get( url )
                    .then(function (res) {
                        if( res.data.status ){
                            //todo 添加提示
                            console.log( res.data.description );
                            return;
                        }
                        // t.cart_list = res.data.list;
                        t.goods_total = res.data.goods_total;
                        t.order_total = res.data.order_total;
                        // for( var i = 0; i < t.cart_list.length; i ++ ){
                        //
                        //     t.cart_list[i].selected = 1;
                        //
                        // }
                        // console.log( t.cart_list );
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }
        },

        created:function(){

            this.get_list('created');

        }
    });
</script>



</body></html>